<template>
  <el-card class="mt15 mb15">
    <!-- 第一行——操作按钮 -->
    <div class="filter-container">
      <el-button class="el-icon-document-add" type="primary">新增</el-button>
    </div>
    <!-- / 第一行——操作按钮 -->

    <!-- table表格 -->
    <el-table :data="tableData" :stripe="true" style="width: 100%">
      <!-- 缩略图 -->
      <el-table-column align="right" label="缩略图" width="200px">
        <!-- 图片 -->
        <el-image
          class="tupian"
          style="width: 100px; height: 50px"
          :src="url"
        ></el-image>
      </el-table-column>

      <!-- 标题 -->
      <el-table-column align="center" prop="label" label="标题" width="100px">
      </el-table-column>

      <!-- 图片链接 -->
      <el-table-column align="center" prop="url" label="图片链接" width="180px">
      </el-table-column>

      <!-- 是否新页面打开 -->
      <el-table-column
        align="center"
        prop="open"
        label="是否新页面打开"
        width="120px"
      >
      </el-table-column>

      <!-- 状态 -->
      <el-table-column align="center" label="状态" width="120px">
        <template slot-scope="{ row }">
          <span v-if="row.state === 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>

      <!-- 排序 -->
      <el-table-column align="center" prop="sort" label="排序" width="80px">
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column
        align="center"
        prop="time"
        label="创建时间"
        width="190px"
      >
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="100" align="center">
        <template>
          <el-button type="text">修改</el-button>

          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
      <!-- / 操作 -->
    </el-table>
    <!-- / table表格 -->

    <pagination
      v-show="total > 0"
      :total="total"
      prev-text="上一页"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </el-card>
</template>

<script>
import { fetchList } from "@/api/article";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

let id = 0; // 城市选择构造
export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      // 时间选择器
      value1: "",
      // 时间选择器

      // 标题
      input: "",
      // 标题

      // 图片地址
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      // 图片地址

      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id",
      },

      importanceOptions: ["不限", "以前", "今天", "以后"],
      citys: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 }).map((item) => ({
              value: ++id,
              label: `选项${id}`,
              leaf: level >= 2,
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        },
      },
      restaurants: [],
      state: "",
      timeout: null,
      value: "",

      // table数据
      tableData: [
        {
          label: "标题1", //标题
          url: "admin", //图片链接
          open: "流转完毕", //是否新页面打开
          state: 1, //状态
          sort: "0", //排序
          time: "2019-06-08", //创建时间
        },
        {
          label: "标题1",
          url: "admin",
          open: "流转完毕",
          state: 0,
          sort: "0",
          time: "2019-06-08",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // table表格事件
    indexMethod(index) {
      return index * 2;
    },

    // 分页数据
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then((response) => {
        this.list = response.data.items;
        this.total = response.data.total;

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },

    // 搜索
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    // 排序
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.handleFilter();
    },
    loadAll() {
      return [
        { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },

        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号",
        },

        { value: "阳阳麻辣烫", address: "天山西路389号" },

        {
          value: "南拳妈妈龙虾盖浇饭",
          address: "普陀区金沙江路1699号鑫乐惠美食广场A13",
        },
      ];
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },

    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 抽屉打开
    drawOpen() {},
  },
};
</script>
<style lang="scss" scoped>
.filter-container {
  line-height: 36px;
  font-size: 14px;
  margin-bottom: 10px;
  .filter-item {
    margin-bottom: 0;
  }
}

.operation {
  cursor: pointer;
}

::v-deep .tupian {
  .el-image__inner {
    width: 85%;
    height: 80%;
  }
}
</style>
